import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter as Router, Route, Redirect, Switch} from 'react-router-dom'
import { asyncComponent } from 'react-async-component';
import { Tools } from 'weaver-mobile';
import { FloatingTouch } from 'weaver-mobile-page';

import allStore from './stores';
import './style';

const getLocaleLabel = Tools.getLocaleLabel.bind(this, 'voting');

const coms = {
  Voting: asyncComponent({
    resolve: () => import('./components/voting')
  })
}

class Root extends React.Component {
  
  onHomePageClick() {
    window.location.href = '/#/';
  }
	
  render() {
		return (
      <Provider {...allStore}>
        <Router>
          <FloatingTouch onClick={() => this.onHomePageClick()}>
            <Route name='home' path='/' onEnter={getLocaleLabel} render={() => {
                return (
                  <Switch>
                    <Route name="voting" path="/voting" component={coms.Voting} />
                    <Redirect to="/voting" />
                  </Switch>
                );
            }}/>
          </FloatingTouch>
        </Router>
      </Provider>
    );
  }
}

Tools.getLocaleLabel('voting', () => {
  render(<Root />, document.getElementById('root'));
});